<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n11.n001}}{{level}}
				</view>
				<!-- <view @click="$tool.navTo('/pages/mine/commissionRecord')" class="flex-1 text-alignR A-Medium record"
					:class="model=='light'?'recordLight':''">
					<view class="pr-3">
						{{i18n.m014}}
					</view>
				</view> -->
				<view class="flex-1 f0 pr-3 flex justify-end">
					<image @click="$tool.navTo('/pages/mine/commissionRecord')" style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h40">

		</view>
		<view class="mx-3 topWrap" :class="model=='light'?'topWrapLight':''">
			<!-- <view class="flex-1 flex flex-column align-center">
				<view class="text1 D-Bold">
					{{inviteCount3}}
				</view>
				<view class="text2 A-Medium">
					今日佣金(USD)
				</view>
			</view>
			<view class="flex-1 flex flex-column align-center">
				<view class="text1 D-Bold">
					{{inviteCount4}}
				</view>
				<view class="text2 A-Medium">
					累积佣金(USD)
				</view>
			</view> -->
			<view class="flex align-center bb">
				<!-- 今日佣金 -->
				<view class="py-3 flex-1 br flex flex-column align-center">
					<view class="text1 D-Bold color1">
						{{inviteCount3}}
					</view>
					<view class="text2 A-Medium">
						{{i18n11.n002}}(USD)
					</view>
				</view>
				<!-- 累积佣金 -->
				<view class="py-3 flex-1 flex flex-column align-center">
					<view class="text1 D-Bold color1">
						{{inviteCount4}}
					</view>
					<view class="text2 A-Medium">
						{{i18n11.n003}}(USD)
					</view>
				</view>
			</view>
			<view class="flex align-center">
				<!-- 今日佣金 -->
				<view class="py-3 flex-1 br flex flex-column align-center">
					<view class="text1 D-Bold color2">
						{{inviteCount5}}
					</view>
					<view class="text2 A-Medium">
						{{i18n11.n004}}(USD)
					</view>
				</view>
				<!-- 累积佣金 -->
				<view class="py-3 flex-1 flex flex-column align-center">
					<view class="text1 D-Bold color2">
						{{inviteCount6}}
					</view>
					<view class="text2 A-Medium">
						{{i18n11.n005}}(USD)
					</view>
				</view>
			</view>
		</view>
		<!-- tablist -->
		<view class="tabWrap A-Medium my-3 ml-3 flex align-center" :class="model!='light'?'tabWrapLight':''">
			<view class="mr-3" @click="changecommissionTradeType('')" :class="commissionTradeType==''?'item2':'item1'">
				{{i18n11.n006}}
			</view>
			<view class="mr-3" @click="changecommissionTradeType(3)" :class="commissionTradeType==3?'item2':'item1'">
				{{i18n11.n007}}
			</view>
			<view class="mr-3" @click="changecommissionTradeType(2)" :class="commissionTradeType==2?'item2':'item1'">
				{{i18n11.n008}}
			</view>
			<view class="mr-3" @click="changecommissionTradeType(1)" :class="commissionTradeType==1?'item2':'item1'">
				{{i18n11.n009}}
			</view>
		</view>
		<view v-for="(item,index) in list" class="list mx-3 A-Medium" :class="model!='light'?'listLight':''">
			<!-- 交易流水 -->
			<view class="flex f24 align-center mb14 justify-between">
				<view class="text1">
					{{i18n11.n010}}
				</view>
				<view class="text2">
					${{
						item.commissionTradeType==1?item.optionsTradeAmount:
						item.commissionTradeType==2?item.arbitrageTradeAmount:
						item.commissionTradeType==3?item.spotTradeAmount:''
					}}
				</view>
			</view>
			<!-- 交易类型 -->
			<view class="flex f24 mb14 align-center justify-between">
				<view class="text1">
					{{i18n11.n011}}
				</view>
				<view class="text1 f28">
					{{
						item.commissionTradeType==1?i18n11.n012:
						item.commissionTradeType==2?i18n11.n013:
						item.commissionTradeType==3?i18n11.n014:''
					}}
				</view>
			</view>
			<!-- 交易来源 -->
			<view class="flex f24 mb14 align-center justify-between">
				<view class="text1">
					{{i18n11.n015}}
				</view>
				<view class="text1">
					{{
						item.sourceLevel=="L1"?i18n.m026:
						item.sourceLevel=="L2"?i18n.m027:
						item.sourceLevel=="L3"?i18n.m028:''
					}}
				</view>
			</view>
			<!-- 获得佣金 -->
			<view class="flex f24 mb14 align-center justify-between">
				<view class="text1">
					{{i18n11.n016}}
				</view>
				<view class="text3">
					+${{
						item.commissionTradeType==1?item.optionsCommissionAmount:
						item.commissionTradeType==2?item.arbitrageCommissionAmount:
						item.commissionTradeType==3?item.spotCommissionAmount:''
					}}
				</view>
			</view>
			<view class="flex f24 align-center justify-between">
				<view class="text1">
					{{i18n11.n017}}
				</view>
				<view class="text1">
					{{item.billDate}}
				</view>
			</view>
		</view>
		<view class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n.m010}}～
		</view>
	</view>
</template>

<script>
	import {
		commissionList,
		totalAmount2
	} from '@/core/api/user.js';
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize:15,
				startDate: '',
				endDate: '',
				commissionTradeType:'',
				list:[],
				level:"",
				inviteCount3:0,
				inviteCount4:0,
				inviteCount5:0,
				inviteCount6:0,
			}
		},
		onLoad() {
			totalAmount2({
				mobileUserId: uni.getStorageSync('mobileUserId'),
			}).then(res => {
				this.inviteCount3 = res.result.indayAmount?res.result.indayAmount:0;
				this.inviteCount4 = res.result.totalAmount?res.result.totalAmount:0;
				this.inviteCount5 = res.result.myFlowMount?res.result.myFlowMount:0;
				this.inviteCount6 = res.result.teamFlowMount?res.result.teamFlowMount:0;
			})
			this.getCommissionList();
		},
		onReachBottom() {
			this.pageNo++;
			this.getCommissionList();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine2');
			},
			i18n10() {
				return this.$t('newObj');
			},
			i18n11() {
				return this.$t('newObj3');
			},
			model() {
				// return 'light';
				return this.$store.state.config.model;
				
			}
		},
		methods:{
			changecommissionTradeType(e){
				if(this.commissionTradeType == e){
					return;
				}
				this.commissionTradeType = e;
				this.pageNo=1;
				this.getCommissionList();
			},
			getCommissionList(){
				commissionList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					startDate: this.startDate,
					endDate: this.endDate,
					commissionTradeType: this.commissionTradeType,
					mobileUserId: uni.getStorageSync('mobileUserId')
				}).then(res=>{
					console.log(res,'cs');
					this.level = res.result.level;
					let list = res.result.pageList;
					if(this.pageNo==1){
						this.list = list;
					}else {
						if(list.length==0){
							this.pageNo--;
						}else{
							this.list.push(...list);
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 28rpx 36rpx 28rpx 28rpx;
		border-radius: 30rpx;
		background: #fff;
		margin-bottom: 24rpx;
		.text1 {
			color: #7F838D;
		}
		.text2 {
			color: #53D290;
		}
		.text3 {
			color: #D22540;
		}
		.mb14 {
			margin-bottom: 14rpx;
		}
		.f24 {
			font-size: 24rpx;
		}
		.f28 {
			font-size: 28rpx;
		}
	}
	.listLight {
		border: 2rpx solid #1F2128;
		background: #16181C;
	}
	.tabWrap {
		.item1 {
			font-size: 24rpx;
			color: #7F838D;
		}
		.item2 {
			font-size: 24rpx;
			color: #0E0F11;
		}
	}
	.tabWrapLight {
		.item2 {
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.topWrap {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		.br {
			border-right: 2rpx solid #30333D;
		}
		.bb {
			border-bottom: 2rpx solid #30333D;
		}
		.text1 {
			color: #AAACB8;
		}
		.text2 {
			color: #7F838D;
		}
		.color1 {
			color: #D22540;
		}
		.color2 {
			color: #53D290;
		}
	}
	.topWrapLight {
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 2rpx solid #FFFFFF;
		.br {
			border-right: 2rpx solid #f4f4f4;
		}
		.bb {
			border-bottom: 2rpx solid #f4f4f4;
		}
		.text1 {
			font-weight: bold;
			font-size: 26rpx;
			color: #0E0F11;
		}
		.text2 {
			margin-top: 4rpx;
			font-size: 22rpx;
			color: #7F838D;
			color: #0E0F11;
		}
		.color1 {
			color: #D22540;
		}
		.color2 {
			color: #53D290;
		}
	}
	
	.h40 {
		height: 40rpx;
	}

	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	
</style>